<template>
  <div class="app-container goTop">
     <div class="headbtn_box">
          <div class="addbutton">
              <el-button type="primary"  size="small" @click="handlerSubmit"  > 保存</el-button>
              <el-button type="danger"  size="small" @click="handlerBack" > 返回</el-button>
          </div>
      </div>
      <!-- 表单 -->
      <el-form ref="form" :model="form"     label-width="100px" label-position="left" size="small">
        <div class="mt15" >
          <el-card class="box-card" shadow="never">
              <div class="box_tit"  style="width: 150px; margin-bottom: 18px;">商品基础信息</div>
               <!-- 编辑信息层 -->
              <div class="edits"  >
                <el-row :gutter="15">
                  <el-col :span="8">
                    <el-form-item label="商家名称:" >
                        {{ form.merchantName?  form.merchantName : merchanderName }}
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                     <el-form-item label="商品类别" prop="categoryId" >
                      <el-select v-model="form.categoryId"  placeholder="请选择" size="small">
                          <el-option
                            v-for="item in categoryList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                   <el-form-item label="商品名称" prop="name" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                     <el-input v-model="form.name" placeholder="商品名称" />
                   </el-form-item>
                  </el-col>

                  <el-col :span="8">
                   <el-form-item label="商品价格" prop="price" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                     <el-input v-model.number="form.price" placeholder="商品价格" />
                   </el-form-item>
                  </el-col>

                  <el-col :span="8">
                   <el-form-item label="状态" prop="isgrounding" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                     <el-radio-group v-model="form.isgrounding">
                        <el-radio
                           v-for="item in dicts.shop_background"
                           :key="item.id"
                           :label="item.dictValue"
                        >{{ item.dictLabel }}</el-radio>
                     </el-radio-group>
                   </el-form-item>
                  </el-col>

                  <el-col :span="8">
                      <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="库存-1为不限量"
                            placement="top-start"
                          >

                       <el-form-item label="商品库存" prop="num" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                         <el-input v-model.number="form.num" placeholder="商品库存" />
                       </el-form-item>
                    </el-tooltip>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="商品图片" prop="picture" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                      <el-upload
                          class="avatar-uploader"
                          :action="avatarUploadUrl"
                           :headers="tokenHeader"
                          :show-file-list="false"
                          :on-success="handleAvatarSuccess"
                          :before-upload="beforeAvatarUpload"
                        >
                          <img v-if="form.picture" :src="form.picture" class="avatar" width="350" />
                          <el-icon v-else class="el-icon-plus avatar-uploader-icon"></el-icon>
                        </el-upload>

                      <div style="display:none;">
                        <el-input v-model="form.picture" />
                      </div>
                    </el-form-item>
                  </el-col>

                </el-row>
              </div>
          </el-card>
        </div>


        <!-- 规格列表配置 -->
        <div class="mt15" >
          <el-card class="box-card" shadow="never">
              <div class="box_tit"  style="width: 150px; margin-bottom: 18px;">商品规格</div>

               <el-form-item label="规格配置">
                 <div v-if="form.dishFlavors" class="flavorBox">
                   <!-- 商品本身没有规格数据 -->
                   <el-button v-if="form.dishFlavors.length == 0" type="warning" class="addBut" @click="addFlavor()">+添加规格</el-button>

                   <!--商品本身有规格-->
                   <div v-if="form.dishFlavors.length != 0" class="flavor">

                     <div v-for="(item ,index ) in form.dishFlavors" class="cont">
                       <span>规格名（8个字内）</span>
                        <span class="delFlavor delBut non" @click="delFlavor(index)">删除</span>
                       <!--规格名称 -->
                       <div style="width: 30%;">
                          <el-form-item   :key="index" :prop="'dishFlavors.' + index + '.name'"  :rules="[{required: true,message: '该值不能为空',trigger: 'blur'}]">
                               <el-input v-model="item.name" placeholder="请输入规格名称"  maxlength="8" show-word-limit/>
                         </el-form-item>
                       </div>

                       <!-- 规格明细 -->
                       <div class="labItems">
                         <el-tag effect="plain"  type="success" class="labTag" v-for="(tag,ind) in item.value" :key="ind" closable :disable-transitions="false" @close="handleChildrenClose(item,ind)">
                             <ItemEdit    :item="tag"></ItemEdit>
                          </el-tag>
                         <el-button   class="button-new-tag" size="small" @click="addChildren(item)">+ 添加</el-button>
                       </div>
                     </div>

                     <el-button type="warning" @click="addFlavor()">添加规格</el-button>

                   </div>
                 </div>
               </el-form-item>

          </el-card>
        </div>

        <!-- 商品详情 -->
        <div class="mt15" >
          <el-card class="box-card" shadow="never">
              <div class="box_tit"  style="width: 150px; margin-bottom: 18px;">商品详情</div>
              <QuillEditor v-model="form.description"  style="min-height: 400px;"/>
          </el-card>
        </div>

        </el-form>


     <el-backtop target=".goTop"></el-backtop>


  </div>
</template>

<script>
  //图片上传配置
  import {adminImageUploadUrl} from '@/settings.js'
  import { getToken } from '@/utils/auth'
  import {dataDictTypes } from '@/api/dictdata.js'
  import {addApi,updateApi,findByIdApi} from '@/api/product.js'
  import {dataApi as categoryApi} from '@/api/categoryclass.js'
  import ItemEdit from '@/components/DivItem/edit.vue'
  import QuillEditor from '@/components/Editor/index.vue'
  export default {
    components: {
      ItemEdit,
      QuillEditor
    },
    computed:{
      merchanderName(){
        return this.$store.getters.name
      },
      tokenHeader(){
        return {
          'Authorization' : 'Bearer '+ getToken()
        }
      }
    },
    data(){
      return {
        avatarUploadUrl: adminImageUploadUrl,
        //商品分类列表
         categoryList: [],
         //商品表单信息
         form: {
          picture: undefined,
          isgrounding: '0',
          num: -1,
          // 口味列表
          dishFlavors: [],
          description: undefined
         },
         dicts:{}
      }
    },
    methods: {
       handleAvatarSuccess(res, file) {
        if(res.code===200){
           this.form.picture= res.data.image_url
        }else{
           this.$message({message: res.msg, type: 'danger'});
        }
       } ,
      beforeAvatarUpload(file) {
         const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
         const isLt2M = file.size / 1024 / 1024 < 2;

         if (!isJPG) {
           this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
         }
         if (!isLt2M) {
           this.$message.error('上传头像图片大小不能超过 2MB!');
         }
         return isJPG && isLt2M;
      },
      //提交保存
      handlerSubmit(){
       
      },
      executeSubmit(){
        

      },
      //返回
      handlerBack(){
         this.$router.go(-1)
      } ,
      //查询数据字典的值
      fetchDictTypes() {
       
      },
      //添加商品规格(大项)
      addFlavor(){
         
      },
      //添加规则里面的细项
      addChildren(item){
         
      },
      //移出规则细项
       handleChildrenClose(item,index){
         
      },
      //删除规格
      delFlavor(index){
       
      }
    },
    created() {
     
      //读取商品id属性，查询商品
      const id=this.$route.params.id
      if(id){
        

      }

    }
  }
</script>

<style  lang="scss">
  .mt15{
    margin-top: 15px;
  }
  .goTop{
      height: 95vh;
      overflow-x: hidden;
    }

  .headbtn_box {
      position: relative;
      background-color: white;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 16px;
      z-index: 1;
      min-width: 950px;
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);

      .addbutton {
          right: 10px;
          button {
              margin: 0 8px;
          }
      }
  }

  .container{
     height: calc(100% - 64px);

     .box_tit {
         font-size: 16px;
         font-weight: bold;
         color: #000000;

         .el-form-item__label {
             font-size: 16px !important;
             color: #000000 !important;
         }
     }

     .mt15{
       margin-top: 15px;
     }

     .el-form-item__label, el-form-item__content {
         font-size: 14px;
     }

  }
  .el-tag + .el-tag {
        margin-left: 10px;
      }
      .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
      }
      .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
      }

   .flavorBox{
     width:100%;
   }
   .flavorBox .flavor {
     border: solid 1px #dfe2e8;
     border-radius: 3px;
     padding: 15px;
     background: #fafafb;
     width: 96%;
   }
   .flavorBox .flavor .title {
     color: #606168;
   }

   .flavor .el-autocomplete {
      width: 150px;
   }

   .flavorBox .flavor .cont .labItems {
     display: block;
     border-radius: 3px;
     border: solid 1px #d8dde3;
     background: #fff;
     padding: 0 5px;
     margin-left: 10px;
     margin-top: 20px;
   }

  .flavorBox .flavor .cont .labItems2 {
    border-radius: 3px;
    min-height: 39px;
    margin-left: 10px;
     background: #fff;
     line-height: 26px;
     padding-top: 3px;
  }

   .flavorBox .flavor .cont  .delFlavor {
     display: inline-block;
     padding: 0 10px;
     color: #f19c59;
     cursor: pointer;
     float: right;
   }

   .flavorBox .flavor .cont {
     margin: 10px 0;
     padding: 10px;
     background-color: #fff;
   }
   .flavorBox .title   .kwbq{
      margin-left: 45px;
   }

   .labTag{
     height: auto !important;
     margin-top: 10px;
   }

   .labItems .el-tag .el-icon-close{
     top: -50px;
   }

   .btn-danger{
     color:#f56c6c;
   }
</style>

<style>
  .labItems .el-tag .el-icon-close{
    top: -50px;
  }
</style>
